【JS】两个页面之间的传参和获取（获取url中的参数）

2024-06-18 05:31| 来源: 网络整理| 查看: 265

前言：近期首次完成了一次项目，其中大量用到两个页面之间的传参和获取，在此做一个总结。

零、获取url中的参数函数

只是需要获参函数的朋友这里直接复制就好~

// 截取字符串后面的参数 function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); // 匹配目标参数 if (r != null) { //清理参数中为null的值 if (unescape(r[2]) == "null") { //在这里做了优化，因为为空时获取的是字符串null return ""; } return unescape(r[2]); // unescape()解码，返回参数值 } else { return ""; } } 一、实现效果

二、源码

页面1 （传参）：

注意传中文时要用escape编码，否则传递过程中会乱码

JS传参用户ID：用户名：跳转 let transmit = document.getElementById("transmit") function go(){ let uid = document.getElementById("uid").value let uName = document.getElementById("uName").value // 改变a的herf指向 transmit.href = "./test2.html?uid=" + uid + "&uName=" + escape(uName) // 如果传递中文需要先用escape()编码 }

页面2（获参）：

1.获参的源码跟网上没有太大差异，因为在使用的过程中发现假如获取参数为null时，该函数会返回字符串“null”，所以做了优化，让其返回""（空值）

2.获参函数的用法是getParameter("对应的参数名")，注意不要漏掉引号

JS获取参数 // 截取字符串后面的参数 function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); // 匹配目标参数 if (r != null) { //清理参数中为null的值 if (unescape(r[2]) == "null") { //在这里做了优化，因为为空时获取的是字符串null return ""; } return unescape(r[2]); // unescape()解码，返回参数值 } else { return ""; } } // 获取url中的参数 let uid = getParameter("uid") let uName = getParameter("uName") document.write("已获取uid的参数为 " + uid + "，已获取uName的参数为 " + uName) 三、其他运用场景

比较有趣的一个用法是公共页面通过不同的打开方式，会展示不同的内容

实现效果：

源码：

页面1（打开公共页面）：

打开页面跳转1 跳转2 function go1(){ let transmit = document.getElementById("transmit1") let openPage = 1 // 改变a的herf指向 transmit.href = "./publicWeb.html?openPage=" + openPage } function go2(){ let transmit = document.getElementById("transmit2") let openPage = 2 transmit.href = "./publicWeb.html?openPage=" + openPage }

页面2（公共页面）：

公共页面 .hide{ display: none; } #green{ color: green; } #red{ color: red; } #blue{ color: blue; } hello!我是小绿 hello!我是小红 hello!我是小蓝 // 截取字符串后面的参数 function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); // 匹配目标参数 if (r != null) { //清理参数中为null的值 if (unescape(r[2]) == "null") { //在这里做了优化，因为为空时获取的是字符串null return ""; } return unescape(r[2]); // unescape()解码，返回参数值 } else { return ""; } } // 获取url中的openPage let openPage = getParameter("openPage") // 做判断,不同方式打开本页面的openPage不同 if (openPage == 1){ document.getElementById("green").classList.add("hide") } else if (openPage == 2){ document.getElementById("red").classList.add("hide") }

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章